<template>
  <div class="register-container"> 
         <div>       
        <div><span is-link @click="showPopup">国家地区</span> <span>+86<i class="yo-ico">&#xe60e;</i></span> 
         </div>
         <div class="tel"><input @focus="handlefocus" v-model="tel" placeholder="请输入手机号" type="text"></div>
        <div><input :value="num" placeholder="请输入验证码" type="text"><span is-link @click="handleclick">获取验证码</span></div>     
         </div>
         <div class="btn">
             <button @click="clickto" :class="{active:isactive}">同意协议并注册</button>
         </div>
         <div class="agreement">
             <span>我已阅读接受<a href="https://sale.damai.cn/contents/4677/13574.html" target="_blank">《大麦网会员服务协议》</a>及<a href="https://sale.damai.cn/contents/4677/13572.html" target="_blank" data-spm-anchor-id="0.7477816.0.0">《隐私专项条款》</a>并同意自动注册成为会员</span>
             </div>
              
              <van-popup v-model="show1"  
  :style="{ height: '10%',width:'50%',background:'#666',color:'white' }"  :overlay="false">
    手机格式不正确，请重新输入
    </van-popup>
             <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '40%' }"
            
             @click="showPopup"
            > 
            <div class="pu-top">
            <span>取消</span>
            <span>确定</span>
            </div>
            <ul>
                <li>中国大陆+86</li>
                <li>中国台湾+886</li>
                <li>中国香港+852</li>
                <li>中国澳门+853</li>
            </ul>
             </van-popup>

  </div>
</template>

<script>
import Vue from 'vue';
import { Popup,Button } from 'vant';
Vue.use(Popup).use(Button);

export default {
data () {
    return {
        show:false,
          tel:'',
          show1:false,
          num:'',
          isactive:true
         
    }
},
methods: {
    showPopup() {
      this.show = true;
    },
       handleclick(){   
     if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.tel))){ 
           this.show1=true 
    }  else{
        this.num=1415666  
        this.isactive=false
    }
  },
  handlefocus(){
    this.show1=false
  },
  clickto(){
    if(!this.isactive){
      console.log(this.tel);    
       this.$router.push({
         path:'/login',
          query: {phone: this.tel}
       })
    }
   
  }
  },
  mounted () {
  }
}
</script>

<style lang="stylus" scoped>

.register-container
  height 100%
  width 100%
  background white
  div
   width 100%
   padding 0.1rem 0.4rem 0 0.4rem
   font-size 0.28rem
   >div:first-child
    display flex
    justify-content space-between
    font-size 0.3rem
    width 100%
    height 1.1rem
    border-bottom 1px solid #e7e7e7
    line-height 1.1rem
    >span::first-child
        width 1.4rem
        padding-left 0.2rem
        font-size 0.28rem
    i 
        color #e7e7e7   
        padding 0 0.1rem
   .tel 
      height 1.1rem
      border-bottom 1px solid #e7e7e7
      line-height 1.1rem
      padding-bottom 0.1rem
      input 
       border none 
       height 100%
       width 100%
   >div:last-child
     width 100%
     height 1.1rem
     display flex
     justify-content space-between  
     border-bottom 1px solid #e7e7e7
     input
       border none
     >span 
      display inline-block
      font-size 0.24rem
      border-radius 0.3rem
      height 0.6rem 
      padding 0 0.3rem
      margin-top 0.2rem
      background #fff1f6
      line-height 0.6rem
      color #fc347b   
  .btn
    margin-top 0.4rem
    button 
     height 0.84rem
     background #ff1268
     width 100%
     border none
     border-radius 0.1rem
     font-size 0.36rem
     color white
    .active 
      opacity 0.4
  .agreement
     color #666 
     font-size 0.24rem
     margin-top 0.1rem 
     a  
      color  #ff1268
    .pu-top
      display flex
      justify-content space-between
      color #ff1268
    ul 
      margin-top 0.4rem
      li 
       line-height 0.68rem
       text-align center 
       font-size 0.3rem 
   
   
</style>